<template>
    <div class="presentation" @mousemove="onHover">
        <div class="header">
            <AppActionButton
                v-tooltip="i18n.t('close')"
                class="action"
                :class="{ show: showActions }"
                @click="toHome"
            >
                <UniconsTimes />
            </AppActionButton>
        </div>
        <div class="body">
            <TheMarkdown :scale="scale" :value="snippetStore.currentContent!" />
        </div>
        <div class="footer">
            <div class="actions" :class="{ show: showActions }">
                <AppActionButton @click="onFullscreen">
                    <UniconsExpandAlt
                        v-if="!isFullscreen"
                        width="24px"
                        height="24px"
                    />
                    <UniconsCompressAlt v-else width="24px" height="24px" />
                </AppActionButton>
                <div class="nav">
                    <AppActionButton @click="onPrevSlide">
                        <UniconsArrowLeft width="24px" height="24px" />
                    </AppActionButton>
                    <AppActionButton @click="onNextSlide">
                        <UniconsArrowRight width="24px" height="24px" />
                    </AppActionButton>
                </div>
                <div class="scale">
                    <AppActionButton @click="onMinusScale">
                        <UniconsMinus width="24px" height="24px" />
                    </AppActionButton>
                    <div class="factor">
                        {{ scale }}
                    </div>
                    <AppActionButton @click="onPlusScale">
                        <UniconsPlus width="24px" height="24px" />
                    </AppActionButton>
                </div>
                <div class="count">
                    {{ currentIndex + 1 }} / {{ slideIds.length }}
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { i18n, store } from '@/electron'
import { track } from '@/services/analytics'
import { useSnippetStore } from '@/store/snippets'
import { computed, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useDebounceFn, useMagicKeys, useFullscreen } from '@vueuse/core'
import { useAppStore } from '@/store/app'

const snippetStore = useSnippetStore()
const appStore = useAppStore()
const router = useRouter()
const { left, right, escape } = useMagicKeys()
const { isFullscreen, toggle } = useFullscreen()

const slideIds = snippetStore.snippets
    .filter((i) => i.content[0].language === 'markdown')
    .map((i) => i.id)
const currentIndex = computed(() =>
    snippetStore.snippets.findIndex((i) => i.id === snippetStore.selectedId)
)

const showActions = ref(false)
const scale = computed({
    get: () => appStore.markdown.presentationScale,
    set: (v) => {
        appStore.markdown.presentationScale = Number(v.toFixed(1))
        store.preferences.set('markdown', { ...appStore.markdown })
    }
})
const toHome = () => {
    router.push('/')
}

const onPrevSlide = () => {
    const prevId = slideIds[currentIndex.value - 1]
    if (prevId) {
        snippetStore.getSnippetsById(prevId)
    }
}

const onNextSlide = () => {
    const nextId = slideIds[currentIndex.value + 1]
    if (nextId) {
        snippetStore.getSnippetsById(nextId)
    }
}

const onMinusScale = () => {
    if (scale.value.toFixed(1) === '1.0') return
    scale.value -= 0.1
}

const onPlusScale = () => {
    scale.value += 0.1
}

const onFullscreen = () => {
    toggle()
}

const hideActions = useDebounceFn(() => {
    showActions.value = false
}, 2000)

const onHover = () => {
    showActions.value = true
    hideActions()
}

watch(left, (v) => {
    if (v) onPrevSlide()
})

watch(right, (v) => {
    if (v) onNextSlide()
})

watch(escape, (v) => {
    if (v) toHome()
})

track('presentation')
</script>

<style lang="scss" scoped>
.presentation {
    margin-top: var(--title-bar-height);
}
.header {
    display: flex;
    justify-content: flex-end;
    padding: 0 var(--spacing-xs);
}
.body {
    padding: var(--spacing-sm) var(--spacing-xl);
    display: grid;
    :deep(h1) {
        border-bottom: none;
    }
}

.footer {
    position: absolute;
    left: var(--spacing-sm);
    bottom: var(--spacing-sm);
    .actions {
        align-items: center;
        display: flex;
        gap: var(--spacing-sm);
        opacity: 0;
        transition: opacity 0.3s;
        &:hover {
            opacity: 1;
        }
        &.show {
            opacity: 1;
        }
        .nav {
            display: flex;
        }
        .scale {
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
            .factor {
                width: 20px;
                text-align: center;
            }
        }
    }
}
.action {
    opacity: 0;
    transition: opacity 0.3s;
    &.show {
        opacity: 1;
    }
}
</style>
